<template>
    <div v-if="isDevelopment" class="mt-4 p-3 bg-gray-800/50 rounded-lg border border-gray-700">
        <div class="text-xs text-gray-400 mb-2">调试信息:</div>
        <div class="text-xs text-gray-500 space-y-1">
            <div>模式: {{ debugInfo.mode }}</div>
            <div v-if="debugInfo.mode === 'text'">
                文本长度: {{ debugInfo.textLength }}
            </div>
            <div v-if="debugInfo.mode === 'image'">
                图片数量: {{ debugInfo.imageCount }}
            </div>
            <div>表单有效: {{ debugInfo.isValid ? '是' : '否' }}</div>
            <div>验证错误: {{ debugInfo.errorCount }}</div>
            <div v-if="debugInfo.smartOptimization">
                智能优化: {{ debugInfo.smartOptimization.enabled ? '开启' : '关闭' }}
            </div>
            <div v-if="debugInfo.smartOptimization?.loading">
                优化状态: {{ debugInfo.smartOptimization.loading ? '加载中' : '空闲' }}
            </div>
        </div>
    </div>
</template>

<script setup>
import { computed } from 'vue'

// Props
const props = defineProps({
    isDevelopment: {
        type: Boolean,
        default: false
    },
    generatorConfig: {
        type: Object,
        required: true
    },
    generatorState: {
        type: Object,
        required: true
    },
    canGenerate: {
        type: Boolean,
        default: false
    },
    smartOptimization: {
        type: Object,
        default: null
    }
})

// 计算调试信息
const debugInfo = computed(() => {
    const config = props.generatorConfig
    const state = props.generatorState

    return {
        mode: config.mode,
        textLength: config.mode === 'text' ? config.textConfig.prompt.length : 0,
        imageCount: config.mode === 'image'
            ? (config.imageConfig.type === 'single'
                ? config.imageConfig.singleFiles.length
                : config.imageConfig.multipleFiles.length)
            : 0,
        isValid: props.canGenerate,
        errorCount: state.validationErrors.length,
        smartOptimization: props.smartOptimization
    }
})
</script>